<template>
  <div class="container">
    <div class="query-form">
      <el-form ref="formRef" :model="queryForm" :rules="rules" inline>
        <el-form-item>
          <el-button type="primary" @click="handleExportClick">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="isLoading" :data="humanEfficiencies" border show-summary>
      <el-table-column prop="countryName">
        <template #header>
          <span>国家/地区名称</span>
          <br/>
          <span>Country name</span>
        </template>
      </el-table-column>
      <el-table-column prop="storeCode">
        <template #header>
          <span>门店代码</span>
          <br/>
          <span>Store code</span>
        </template>
      </el-table-column>
      <el-table-column prop="storeName">
        <template #header>
          <span>门店名称</span>
          <br/>
          <span>Store name</span>
        </template>
      </el-table-column>
      <el-table-column prop="openingDate">
        <template #header>
          <span>开业日期</span>
          <br/>
          <span>Opening date</span>
        </template>
      </el-table-column>
      <el-table-column label="店铺性质 Store Nature" prop="storeNature">
        <template #header>
          <span>店铺性质</span>
          <br/>
          <span>Store Nature</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalWorkingHoursActuallyAttendedWithPartTime">
        <template #header>
          <span>月实际出勤总工时（小时）含兼职</span>
          <br/>
          <span>Total working hours(hours) actually attended With part-time</span>
        </template>
      </el-table-column>
      <el-table-column prop="standardWorkingHoursPerPersonPerMonth">
        <template #header>
          <span>标准工时（小时/人/月）</span>
          <br/>
          <span>Standard working hours(Hour/person/month)</span>
        </template>
      </el-table-column>
      <el-table-column prop="monthlyActualAttendancePersonsByWorkingHours">
        <template #header>
          <span>月实际出勤总人数（人）按工时换算</span>
          <br/>
          <span>Monthly Actual Attendance(Persons) By working hours</span>
        </template>
      </el-table-column>
      <el-table-column prop="fullTimeStaffNumber">
        <template #header>
          <span>在编人数（全职）</span>
          <br/>
          <span>Staff number(full time)</span>
        </template>
      </el-table-column>
      <el-table-column prop="partTimeStaffNumber">
        <template #header>
          <span>在编人数（兼职）</span>
          <br/>
          <span>Staff number(part time)</span>
        </template>
      </el-table-column>
      <el-table-column prop="fixedNumber">
        <template #header>
          <span>定编人数（全职）</span>
          <br/>
          <span>Fixed number</span>
        </template>
      </el-table-column>
      <el-table-column prop="note">
        <template #header>
          <span>备注</span>
          <br/>
          <span>Note</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import {ElForm, ElMessage, FormRules} from "element-plus";
import {utils, writeFile} from "xlsx";

const isLoading = ref(false)
const queryForm = ref()
const formRef = ref<InstanceType<typeof ElForm>>()
const rules: FormRules = {}

interface HumanEfficiencyResponse {
  countryName?: string
  storeCode?: string
  storeName?: string
  openingDate?: string
  storeNature?: string
  totalWorkingHoursActuallyAttendedWithPartTime?: number
  standardWorkingHoursPerPersonPerMonth?: number
  monthlyActualAttendancePersonsByWorkingHours?: number
  fullTimeStaffNumber?: number
  partTimeStaffNumber?: number
  fixedNumber?: number
  note?: string
}

const humanEfficiencies = ref<HumanEfficiencyResponse[]>([])

async function getData() {
  if (isLoading.value == false) {
    isLoading.value = true;
  }
  setInterval(() => {
    humanEfficiencies.value = [{
      countryName: "中國香港",
      storeCode: "HK0L",
      storeName: "上環無限極廣場店",
      openingDate: "10/22/2016",
      storeNature: "直营",
      totalWorkingHoursActuallyAttendedWithPartTime: 1126,
      standardWorkingHoursPerPersonPerMonth: 228,
      monthlyActualAttendancePersonsByWorkingHours: 4.9,
      fullTimeStaffNumber: 5,
      partTimeStaffNumber: 6,
      fixedNumber: 5,
      note: ""
    }]
    isLoading.value = false
  }, 1000)
}

getData()

function handleExportClick() {
  if (humanEfficiencies.value.length > 0) {
    const processedData: {
      "国家/地区名称"?: string
      "门店代码"?: string
      "门店名称"?: string
      "开业日期"?: string
      "店铺性质"?: string
      "月实际出勤总工时（小时）含兼职"?: number
      "标准工时（小时/人/月）"?: number
      "月实际出勤总人数（人）按工时换算"?: number
      "在编人数（全职）"?: number
      "在编人数（兼职）"?: number
      "定编人数（全职）"?: number
      "备注"?: string
    }[] = humanEfficiencies.value.map((humanEfficiency: HumanEfficiencyResponse) => ({
      "国家/地区名称": humanEfficiency.countryName,
      "门店代码": humanEfficiency.storeCode,
      "门店名称": humanEfficiency.storeName,
      "开业日期": humanEfficiency.openingDate,
      "店铺性质": humanEfficiency.storeNature,
      "月实际出勤总工时（小时）含兼职": humanEfficiency.totalWorkingHoursActuallyAttendedWithPartTime,
      "标准工时（小时/人/月）": humanEfficiency.standardWorkingHoursPerPersonPerMonth,
      "月实际出勤总人数（人）按工时换算": humanEfficiency.monthlyActualAttendancePersonsByWorkingHours,
      "在编人数（全职）": humanEfficiency.fullTimeStaffNumber,
      "在编人数（兼职）": humanEfficiency.partTimeStaffNumber,
      "定编人数（全职）": humanEfficiency.fixedNumber,
      "备注": humanEfficiency.note
    }))
    const workBook = utils.book_new()
    const workSheet = utils.json_to_sheet(processedData, {
      header: [
        "国家/地区名称",
        "门店代码",
        "门店名称",
        "开业日期",
        "店铺性质",
        "月实际出勤总工时（小时）含兼职",
        "标准工时（小时/人/月）",
        "月实际出勤总人数（人）按工时换算",
        "在编人数（全职）",
        "在编人数（兼职）",
        "定编人数（全职）",
        "备注"
      ]
    })
    utils.book_append_sheet(workBook, workSheet)
    writeFile(workBook, "output.xlsx")
  } else {
    ElMessage.error("没有数据可以导出")
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}
</style>
